<template>
  <el-dialog
    @open="openHandler"
    @close="closeHandler"
    title="添加角色"
    :visible.sync="showDialog"
    width="35%"
  >
    <el-form
      ref="form"
      :model="formData"
      :rules="formRules"
      label-width="100px"
    >
      <el-form-item label="角色名称" prop="role_name">
        <el-input
          v-model="formData.role_name"
          placeholder="请输入角色名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="角色标识" prop="identify">
        <el-input
          v-model="formData.identify"
          placeholder="请输入角色标识"
        ></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          rows="2"
          placeholder="请输入角色描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="角色权限">
        <el-tree
          :default-expanded-keys="defaultExpanded"
          :data="menus"
          show-checkbox
          node-key="id"
          ref="tree"
        >
          <span slot-scope="{ data }">
            <span>{{ data.permission_name }}</span>
          </span>
        </el-tree>
      </el-form-item>
    </el-form>
    <el-row type="flex" justify="end">
      <el-button size="small" @click="showDialog = false"> 取消</el-button>
      <el-button type="primary" size="small" @click="btnOk">确定</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import {
  addRoleApi,
  getPermissionMenuApi,
  editRoleApi,
} from "@/api/roleManager";
// import { transToTree } from "@/utils";
export default {
  name: "AddRole",
  data() {
    return {
      isEdit: true, //用来判断是新增还是编辑
      showDialog: false,
      formData: {
        authlist: [],
        description: "",
        identify: "",
        role_name: "",
      },
      defaultExpanded: [],
      formRules: {
        authlist: [{ required: true, message: "请输入", trigger: "blur" }],
        description: [{ required: true, message: "请输入", trigger: "blur" }],
        identify: [{ required: true, message: "请输入", trigger: "blur" }],
        role_name: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      menus: [],
    };
  },
  created() {},
  methods: {
    async initData() {
      console.log(123);
      let res = await getPermissionMenuApi();
      console.log(res);
      this.menus = res;
    },

    //递归处理树型数据
    treeToArr(dataArr, arr) {
      dataArr.forEach((item) => {
        // console.log(item);
        arr.push(item.id);
        if (item.children) {
          // 去掉父节点的id
          if (item.children.some((obj) => obj.parent_id === item.id)) {
            arr.pop();
          }
          console.log(arr);
          this.treeToArr(item.children, arr);
          // console.log(item.children);
          // this.treeToArr(item.children, arr);
        }
      });
      console.log(arr);
      return arr;
    },
    // 弹窗打开处理函数
    openHandler() {
      this.initData();
      if (!this.isEdit) {
        this.$refs.tree.setCheckedKeys([]);
        return;
      }
      this.$nextTick(() => {
        console.log(this.formData.authlist);
        let nodeKeys = this.treeToArr(this.formData.authlist, []);
        console.log(nodeKeys);
        this.$refs.tree.setCheckedKeys(nodeKeys);
        this.defaultExpanded = nodeKeys;
        // this.$refs.tree.setCheckedKeys([125, 126, 127]);
      });
    },
    // 弹窗关闭
    closeHandler() {
      console.log("弹窗关闭");
      this.$refs.form.resetFields();
      this.formData = {};
      this.defaultExpanded = [];
    },
    // 确定处理函数
    async btnOk() {
      let res1 = this.$refs.tree.getCheckedKeys();
      let res2 = this.$refs.tree.getHalfCheckedKeys();
      let res = [...res1, ...res2];
      console.log(res);
      //   console.log(this.formData.authlist);
      this.formData.authlist = res;
      console.log(res);
      console.log(this.formData);
      await this.$refs.form.validate();
      // 判断是新增还是编辑
      if (this.isEdit) {
        console.log("编辑页");
        // console.log(this.formData.authlist);
        await editRoleApi(this.formData);
        this.showDialog = false;
        this.$message.success("修改成功");
      } else {
        console.log("新增页");
        // console.log(this.formData);
        await addRoleApi(this.formData);
        this.showDialog = false;
        this.$message.success("创建成功");
      }
      this.$emit("updateList");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  border-bottom: 1px solid #ebebeb;
}
</style>
